<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .father {
            width: 80vw;
            height: 50vw;
            border: 1px solid #000;
            /* 父元素添加了 position: relative 之后, 子元素的定位就以父元素为参考依据了 */
            position: relative;
        }

        .one {
            width: 20vw;
            height: 10vw;
            background-color: orange;
            /* 开启定位之后, 元素不占位, 后面的内容会自动补上 */
            /* position: absolute 开启之后 默认会以整个网页作为参考的标准 */
            /* 如果希望以父元素为参考依据, 需要给父元素添加: position: relative; */
            position: absolute;
            /* 距离上下左右的距离 top, right, bottom, left */
            top: 50px;
            right: 10px;
            /* 层级 */
            z-index: 1;
        }

        .two {
            width: 20vw;
            height: 10vw;
            background-color: green;
            position: absolute;
            right: 100px;
            z-index: 888;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="father">
        <div class="one">one</div>
        <div class="two">two</div>
    </div>
</body>
</html>